<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Javascript表单交互</title>
</head>

<body>
	<form id="myform1" name="myform1" action=""></form>
	<form id="myform2" name="myform2" action=""></form>		
	
	<script type="text/javascript">			
			console.log(document.getElementById("myform1"));
		
			console.log(document.myform2);
		
			console.log(document.forms);			
		
			console.log(document.forms[0]);			
		
			console.log(document.forms['myform2']);			
	  </script>
	
	<form id="myform" name="myform" action="" method="get"> 
            <!-- 文本框 -->
            姓名：<input type="text" name="uname" id="uname" value="zs" /><br>
            <!-- 密码框 -->
            密码：<input type="password" id="upwd" name="upwd" value="1234"><br>
            <!-- 隐藏域 -->
            <input type="hidden" id="uno" name="uno" value="隐藏域" />
            <!-- 文本域 -->
            个人说明：<textarea name="intro"></textarea><br>
            <!-- 按钮 -->
            <button type="button" onclick="getTxt();">获取元素内容</button><br>
            <hr ><br>
            <input type="text" name="inputName" id="test" value="aaa" />
            <input type="radio" class="test" name="rad" id="test" value="1" />    男
            <input type="radio" class="test" name="rad" id="test" value="2" />  女
            <button type="button" onclick="getRadio()">获取单选按钮</button><br>
            <hr ><br>
            全选/全不选: <input type="checkbox" id="control" onclick="checkAllOrNot()">
            <button type="button" onclick="checkFan()">反选</button><br>
            <input type="checkbox" name="hobby" value="sing" />    唱歌
            <input type="checkbox" name="hobby" value="dance" /> 跳舞
            <input type="checkbox" name="hobby" value="rap" /> 说唱
            <button type="button" onclick="geCheckBox()">获取多选按钮</button>
            <hr ><br>
            来自:
			<select id="ufrom" name="ufrom">
                    <option value ="-1">请选择</option>
                    <option value ="0" selected="selected">北京</option>
                    <option value ="1">上海</option>
                </select><br>
                <button type="button" onclick="getSelect()">获取下拉选项</button>
        </form>        
        <script type="text/javascript">
            
            // 获取元素内容
            function getTxt(){
                // 1.document.getElementById("id属性值");
                var uname = document.getElementById("uname").value;
                console.log(pwd);
                
                // 2.表单对象.表单元素的name属性值;
                var pwd = document.getElementById("myform").upwd.value;
                console.log(pwd);
                
                // 3.document.getElementsByName("name属性值");
                var uno = document.getElementsByName("uno")[0].value;
                console.log(uno);
            
                // 4.document.getElementsByTagName("标签/元素名");
                var intro = document.getElementsByTagName("textarea")[0].value;
                console.log(intro);
            }            
            // 获取单选按钮
            function getRadio(){
                // 通过name属性值获取单选按钮
                /*     var radios = document.getElementsByName("rad");
                    // 判断并遍历
                    if (radios != null && radios.length > 0 ){
                        // 遍历
                        for (var i = 0 ; i < radios.length; i++) {
                            console.log("值:"+radios[i].value+",是否选中:"+radios[i].checked);
                        }
                    }
                */ 
	// 通过class属性值获取
                var cla = document.getElementsByClassName("test");
                console.log(cla);
	 if(cla != null && cla.length > 0 ){
                    for(var i=0; i<cla.length ;i++){
						                        // 判断input元素的类型   type
                        if( cla[i].type == "text" ){   // 文本框
                            console.log("文本框的值:"+cla[i].value);
                        }else if(cla[i].type == "radio"){
                            console.log("值:"+cla[i].value+",是否选中:"+cla[i].checked);
                        }
                    } 
                }
            }            
            function checkAllOrNot(){
                
            }            
            // 反选
            function checkFan(){
                // 通过复选框的name属性值获取
                var checkboxs = document.getElementsByName("hobby");
                //判断
                if (checkboxs != null && checkboxs.length > 0 ) {
                    // 遍历
                    for(var i = 0; i < checkboxs.length; i++) {
                        // 设置选中状态 (取反)
                        checkboxs[i].checked = !checkboxs[i].checked;
                    }
                }
            }            
            function geCheckBox(){
                
            }            
            function getSelect(){
                
            }
        </script>


</body>
</html>
